<template>
  <div v-loading="loading">
    <el-card shadow="never">
      <header-title title="商户统计"></header-title>
    </el-card>
    <el-card shadow="never">
      <el-row>
        <el-col :span="6">
          <card-item title="商户总数">
            <template slot="number">
              <div class="number">
                <count-up :end-val="businessSum"></count-up>
              </div>
            </template>
          </card-item>
        </el-col>
        <el-col :span="9">
          <card-item title="交易金额总数">
            <template slot="number">
              <div class="number">
                <count-up :end-val="moneySum" :decimals="2">
                  <span class="left" slot="left">￥</span>
                  <span class="right" slot="right">{{unit1}}</span>
                </count-up>
              </div>
            </template>
          </card-item>
        </el-col>
        <el-col :span="9">
          <card-item title="交易笔数总数">
            <template slot="number">
              <div class="number">
                <count-up :end-val="numberSum"></count-up>
              </div>
            </template>
          </card-item>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <el-form ref="form" :inline="true" :model="modal">
        <!--<el-form-item label="商户名称">
          <el-input v-model="modal.businessName" placeholder="请输入商户名称" size="small" style="width: 130px;"></el-input>
        </el-form-item>-->
        <el-form-item label="选择日期">
            <el-date-picker
              format="yyyy/MM"
              value-format="yyyy/MM"
              v-model="selectDate"
              :value="selectDate"
              @change="changeDate"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="支付类型">
          <el-select v-model="modal.payWay" multiple placeholder="请选择支付类型" style="width: 175px;">
            <el-option label="现金" value="0"></el-option>
            <el-option label="微信" value="1"></el-option>
            <el-option label="支付宝" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商户主营">
          <el-select v-model="modal.businessType" multiple placeholder="请选择商户主营" style="width: 150px;">
            <el-option label="蔬菜" value="0"></el-option>
            <el-option label="猪肉" value="1"></el-option>
            <el-option label="禽类" value="3"></el-option>
            <el-option label="牛羊肉" value="9"></el-option>
            <el-option label="蛋类" value="10"></el-option>
            <el-option label="豆制品" value="11"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" class="button" size="small" round icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="businessData" v-loading="loading" style="width: 100%">
          <el-table-column prop="Name" label="商户名称"></el-table-column>
          <el-table-column prop="DocCount" label="交易笔数"></el-table-column>
          <el-table-column prop="Sales" label="交易金额(元)"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="tradingList(scope.row)" type="text" style="color:#55b7ff;">交易列表</el-button>
            </template>
          </el-table-column>
          <div slot="empty"><img src="../../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
        </el-table>
        <el-pagination
          :page-size="businessPage.size"
          :current-page="businessPage.current"
          :total="businessPage.total"
          @current-change="changeBusinessPage"
          style="margin-top: 15px;"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import CountUp from '@/components/CountUp/index'
import CardItem from '@/components/CardItem/index'
import { mapGetters, mapState } from "vuex"
import Cookies from 'js-cookie'
import { saleAmount, formatDate2 } from '@/utils'
import moment from 'moment'

const date = formatDate2(new Date())
let startDateInit = date.slice(0,7)
let endDateInit = date.slice(0,7)

export default {
  name: "BusinessOperating",
  components: {
    HeaderTitle,
    CountUp,
    CardItem
  },
  data() {
    return {
      marketId: 0,
      loading: true,
      businessSum: 0,
      moneySum: 0,
      numberSum: 0,
      unit1: '',
      selectDate: [startDateInit, endDateInit],
      modal: {
        businessName: '',
        startDate: startDateInit,
        endDate: endDateInit,
        payWay: [],
        businessType: [],
      },
      businessData: [],
      businessPage: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      this.marketId = val
      this.getBusinessList(
        this.marketId,
        this.modal.businessType === [] ? '' : this.modal.businessType.join(','),
        this.modal.payWay === [] ? '' : this.modal.payWay.join(','),
        this.modal.startDate,
        this.modal.endDate,
        this.businessPage.current,
        this.businessPage.size
      )
    }
  },
  mounted(){
    // const marketData = JSON.parse(Cookies.get('MarketData'))
    // this.marketName = marketData[0].name
    this.marketId = this.$store.state.app.marketId

    this.modal.startDate = formatDate2(this.modal.startDate)
    this.modal.endDate = moment(formatDate2(this.modal.endDate).slice(0,7)).endOf('month').format('YYYY-MM-DD')

    this.getBusinessList(
      this.marketId,
      this.modal.businessType === [] ? '' : this.modal.businessType.join(','),
      this.modal.payWay === [] ? '' : this.modal.payWay.join(','),
      this.modal.startDate,
      this.modal.endDate,
      this.businessPage.current,
      this.businessPage.size
    )
  },
  methods: {
    changeDate(date){
      if(date === null){
        this.modal.startDate = ''
        this.modal.endDate = ''
      }else{
        this.modal.startDate = formatDate2(date[0])
        this.modal.endDate = moment(formatDate2(date[1]).slice(0,7)).endOf('month').format('YYYY-MM-DD')
      }
    },
    search(){
      this.businessPage.current = 1
      this.getBusinessList(
        this.marketId,
        this.modal.businessType === [] ? '' : this.modal.businessType.join(','),
        this.modal.payWay === [] ? '' : this.modal.payWay.join(','),
        this.modal.startDate,
        this.modal.endDate,
        this.businessPage.current,
        this.businessPage.size
      )
    },
    // 获取 商户列表
    /*getBusinessList(ids,businessTypes,payWays,startTime,endTime,page,size) {
      this.$store.dispatch('operating/fetchBusinessData', {ids,businessTypes,payWays,startTime,endTime,page,size}).then(
        res => {
          console.log(res)
        }
      )
    },*/


    getBusinessList(ids,businessTypes,payWays,startTime,endTime,page,size){
      let formData = new FormData()
      formData.append('ids',ids)
      formData.append('businessTypes',businessTypes)
      formData.append('payWays',payWays)
      formData.append('startTime',startTime)
      formData.append('endTime',endTime)
      formData.append('page',page)
      formData.append('size',size)

      this.$axios.post('http://119.3.131.211:8989/aggs/business/dailySales/group', formData, {
        headers: {'Content-Type': 'multipart/form-data; charset=UTF-8'}
      }).then(res => {
        this.loading = false
        for(let i = 0; i < res.data.Data.Items.length;i++){
          res.data.Data.Items[i].Sales = (res.data.Data.Items[i].Sales === '-' ? res.data.Data.Items[i].Sales : res.data.Data.Items[i].Sales / 100)
        }
        this.businessData = res.data.Data.Items
        this.businessPage.total = res.data.Data.total

        this.businessSum = res.data.Data.BusinessCount / 1
        this.moneySum = parseFloat(saleAmount(res.data.Data.Sales / 1)[0])
        this.numberSum = res.data.Data.DocCount / 1
        this.unit1 = saleAmount(res.data.Data.Sales / 1)[1]

      }).catch(error => {
        this.loading = false
        this.businessData = []
        this.businessPage.total = 0
      })
    },
    changeBusinessPage(num){
      this.businessPage.current = num
      this.getBusinessList(
        this.marketId,
        this.modal.businessType === [] ? '' : this.modal.businessType.join(','),
        this.modal.payWay === [] ? '' : this.modal.payWay.join(','),
        this.modal.startDate,
        this.modal.endDate,
        this.businessPage.current,
        this.businessPage.size
      )
    },
    // 获取交易列表
    tradingList(row){
      console.log(row)
      const businessId = row.ID
      this.$router.push({
        path: `/operating/businessOperating/trading/${row.businessId}`,
        query: {
          marketId: this.marketId,
          businessId: businessId,
          startDate: this.modal.startDate,
          endDate: this.modal.endDate,
          payWay: this.modal.payWay === [] ? '' : this.modal.payWay.join(',')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
.el-form-item {
  margin-bottom: 0;
}
</style>
